import Taro, { Component } from "@tarojs/taro";
import { View, Button, Text, Image } from "@tarojs/components";
import { AtButton } from "taro-ui";
import { getCache, removeCache } from "../../utils/cache";
import { CACHE_KEY } from "../../service/config";
import { clearUser, getUserInfo } from "../../actions/account";
import { clearCustomerInfo } from "../../actions/customer";
import { connect } from "@tarojs/redux";
import "./index.less";

@connect(
  ({ account, appconfig }) => ({
    ...account,
    ...appconfig
  }),
  dispatch => ({
    clearUser() {
      dispatch(clearUser());
    },
    clearCustomerInfo() {
      dispatch(clearCustomerInfo());
    },
    async getUserInfo() {
      dispatch(await getUserInfo());
    }
  })
)
class Mine extends Component {
  config = {
    navigationBarTitleText: "个人中心"
  };

  state = {
    status: 0
  };

  componentWillMount() {
    const user = getCache(CACHE_KEY);
    if (user && user.token) {
      this.setState(
        {
          status: 1
        },
        async () => {
          await this.props.getUserInfo();
        }
      );
    }
  }
  choseLoginStatus() {
    const { status } = this.state;
    if (!!status) {
      removeCache(CACHE_KEY);
      this.props.clearUser();
      this.props.clearCustomerInfo();
      this.setState({
        status: 0
      });
    } else {
      Taro.redirectTo({
        url: "/pages/mine/register?status=1"
      });
    }
  }

  render() {
    const { status } = this.state;
    let { name, tel, money, dmoney, icon, staticUri } = this.props;
    const head3 = tel ? tel.toString().slice(0, 3) : "";
    const foot4 = tel ? tel.toString().slice(7) : "";
    const phone = head3 + "****" + foot4;
    return (
      <View className="mine-index">
        <View className="mine-head">
          <View className="head-info-con">
              <Image
                style="width:84px;height:84px;border-radius:5px;"
                src={
                  !status
                    ? require("../../assets/img/avatar_blank.png")
                    : icon
                    ? staticUri + icon
                    : require("../../assets/img/avatar_blank.png")
                }
              />
            <View className="mine-info">
              <Text className="user-name">
                {name && name !== "" ? name : "游客"}
              </Text>
              <View className="phone-editor-con">
                <Text className="user-phone">手机号码：{phone}</Text>
                <Image
                  onClick={() => {
                    if (!!status) {
                      Taro.redirectTo({
                        url: "/pages/mine/info"
                      });
                    }
                  }}
                  style="width:10px;height:18px;"
                  src={require("../../assets/img/white-arrow.png")}
                />
              </View>
            </View>
          </View>
          <View className="user-money">
            {/* <View className="user-total-money"> */}
              {/* <Text style="font-size: 24px;color: #0090FF;">
                {!!status ? money + dmoney : "*****"}
              </Text> */}
              {/* <Image
                style="position:absolute;right:12px;width:20px;height:20px;"
                onClick={() => {
                  if (!!status) {
                    Taro.redirectTo({
                      url: "/pages/mine/account"
                    });
                  } else {
                    Taro.showToast({
                      title: "请先登录",
                      icon: "none"
                    });
                  }
                }}
                src={require("../../assets/img/info.png")}
              /> */}
            {/* </View> */}
            {/* <View className="user-total-money-info">
              <Text style="font-size: 11px;color: #4A4A4A;">
                账户总额（元）
              </Text>
            </View> */}
            <View className="user-balance">
              <View
                className="available-balance"
                onClick={() => {
                  if (!!status) {
                    Taro.redirectTo({
                      url: "/pages/mine/detail?status=0"
                    });
                  } else {
                    Taro.showToast({
                      title: "请先登录",
                      icon: "none"
                    });
                  }
                }}
              >
                <View style="font-size:40px;color:#fa541c;">
                  {!!status ? money : "*"}
                  <Text style="font-size:11px;color:#fa541c;">元</Text>
                </View>

                <Text style="font-size: 12px;color: #808695;">
                  账户金额
                </Text>
              </View>
              <View style="width:2px;height:50px;background-color:#cccccc;"></View>
              <View
                className="freeze-balance"
                onClick={() => {
                  if (!!status) {
                    Taro.redirectTo({
                      url: "/pages/mine/detail?status=1"
                    });
                  } else {
                    Taro.showToast({
                      title: "请先登录",
                      icon: "none"
                    });
                  }
                }}
              >
                <View style="font-size:40px;color:#91d5ff;">
                  {!!status ? dmoney : "*"}
                  <Text style="font-size:11px;color:#91d5ff;">元</Text>
                </View>
                <Text style="font-size: 12px;color: #808695;">
                  审核金额
                </Text>
              </View>
            </View>
          </View>
          <View className="user-withdrawal">
            <Image
              className="withdrawal-img"
              src={require("../../assets/img/withdrawal.png")}
            />
            <Text className="withdrawal-title">提现</Text>
            <View
              className="withdrawal-arrow"
              onClick={() => {
                if (!!status) {
                  if (this.props.banknum && this.props.banknum !== "") {
                    Taro.redirectTo({
                      url: "/pages/mine/complete?fo=index"
                    });
                  } else {
                    Taro.redirectTo({
                      url: "/pages/mine/withdrawal"
                    });
                  }

                } else {
                  Taro.showToast({
                    title: "请先登录",
                    icon: "none"
                  });
                }
              }}
            >
              <Image
                className="mine-arrow-img"
                src={require("../../assets/img/arrow.png")}
              />
            </View>
          </View>
          <View className="user-busniess">
            <Image
              className="busniess-img"
              src={require("../../assets/img/concat-bus.png")}
            />
            <Text className="busniess-title">联系商家</Text>
            <View
              className="busniess-arrow"
              onClick={() => {
                Taro.redirectTo({
                  url: "/pages/mine/contact"
                });
              }}
            >
              <Image
                className="mine-arrow-img"
                src={require("../../assets/img/arrow.png")}
              />
            </View>
          </View>
          <View className="logout-btn">
            <AtButton type="primary" onClick={this.choseLoginStatus.bind(this)}>
              {!!status ? "退出登录" : "登录/注册"}
            </AtButton>
          </View>
        </View>
      </View>
    );
  }
}
export default Mine;
